<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>东北药用植物种质资源保存信息网</title>
    <link rel="shortcut icon " href="js/plant.png" >
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/vue.js"></script>
    <link href="js/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <script src="js/js/bootstrap.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        #show {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap
        }

        table {
            float: left;
            text-align: center;
        }
    </style>

</head>
<body>
<section id="show" style="margin-left: 10%;margin-top: 5%">
    <div style="width: 200px">
        修改：<select style="width: 200px" id="select" v-model="selected">
        <option :value="name" v-for="name in nameList">{{name}}</option>
    </select>
        <input type="text" style="width: 200px" id="text" v-model="textVal">
        <button type="button" class="btn btn-info" @click="change">提交</button>
    </div>
    <div>
        <table class="table table-bordered">
            <thead v-for="(name,index) in sliceList(nameList,3)" :key="index">
            <th v-for="(item,i) in name" :key="i" @click="nexta(item)">
                <table>
                    <thead>
                    <th>{{item}}&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
                    <th>{{plantList[item]}}</th>
                    </thead>
                </table>
            </th>

            </thead>
        </table>
    </div>
    <div style="margin-top: 100px;float: left">
        <img v-bind:src="plantList.ophoto" width="300px" height="300px"
             class="img-rounded"
             v-if="plantList.ophoto!=null">
        <img v-bind:src="plantList.tphoto" width="300px" height="300px"
             class="img-rounded"
             v-if="plantList.tphoto!=null">
        <img v-bind:src="plantList.fphoto" width="300px" height="300px"
             class="img-rounded"
             v-if="plantList.fphoto!=null"></div>

</section>


</body>
<script type="text/javascript">
    var index1 = 0;
    Array.prototype.removeByValue = function (val, v1, v2, v3) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] == val || this[i] == v1 || this[i] == v2 || this[i] == v3) {
                index1++;
                this.splice(i, 1)
                break
            }
        }
    }
    var result

    function oneValues() {
        var url = window.location.search;
        if (url.indexOf("?") != -1) {
            result = url.substr(url.indexOf("=") + 1);
        }
    }

    const x = new Vue({
        el: '#show',
        data: {
            plantList: '',
            nameList: '',
            selected: '资源编号',
            textVal: ''
        },
        methods: {
            nexta(val) {
                console.log(val);
                if (val == '源数据主键') {
                    var pid = this.nameList.indexOf(val) + index1
                    window.location.href = encodeURI("athor.html?pid=" + pid + "&resourceNumber=" + this.plantList['资源编号'])
                }
            },
            queryBy() {
                oneValues()
            },
            queryByRn() {
                axios.get('http://8.130.8.204:8080/plant/import/queryById', {params: {resourceNumber: result}}).then(res => {
                    this.plantList = res.data
                    this.nameList = Object.keys(this.plantList)
                    this.plantList['记录地址'] = this.plantList['种质名称'] + "-" + window.location.href
                    this.plantList['源数据主键'] = '详细信息->'
                })
            },
            change() {
                if (this.textVal != '') {
                    console.log(this.selected);
                    console.log(this.textVal)
                    axios.get('http://8.130.8.204:8080/plant/import/change', {
                        params: {
                            resourceNumber: result,
                            name: this.selected,
                            value: this.textVal
                        }
                    }).then(res => {
                      location.reload()
                    })
                }


            }
        },
        computed: {
            sliceList() {
                return function (data, count) {
                    data.removeByValue("id", "ophoto", "tphoto", "fphoto")
                    if (data != undefined) {
                        let index = 0;
                        let arrTemp = [];
                        for (let i = 0; i < data.length; i++) {
                            index = parseInt(i / count);
                            if (arrTemp.length <= index) {
                                arrTemp.push([]);
                            }
                            arrTemp[index].push(data[i])

                            if (data[i] == '源数据主键') {
                                break
                            }
                        }
                        return arrTemp
                    }
                }
            }
        },

        created() {
            this.queryBy()
            this.queryByRn()
        }
    })
</script>
</html>